<template>
  <div class="uploader">
    <div class="right">
      <div class="file" v-for="(file, index) in files" :key="index">
        <view>
          <image mode="aspectFill" class="cover" :src="file.path"></image>
        </view>
        <template v-if="!disable">
          <image
            class="close"
            src="@/static/icons/close.png"
            mode="widthFix"
            @click="removeFile(index)"
          ></image>
          <div class="loading" v-if="file.status == 'uploading'"></div>
          <image
            v-else-if="file.status == 'finish'"
            class="finish"
            src="@/static/icons/finish.png"
            mode="widthFix"
          ></image
        ></template>
      </div>
      <image
        v-if="!disable"
        @click="chooseFile"
        class="choose"
        mode="widthFix"
        src="@/static/icons/upload.png"
      ></image>
      <div class="upload-bottom" v-if="!disable">
        <div class="left-pic">{{ files.length }}/{{ limit }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { uploadFile } from "@/api/common";
import { myFile } from "@/typings";
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      files: [] as myFile[],
    };
  },
  props: {
    disable: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    chooseFile() {
      console.log("选择文件");
      let resLimit = this.limit - this.files.length;
      if (resLimit == 0) {
        return;
      }
      // #ifdef MP-WEIXIN
      uni.chooseImage({
        count: resLimit,
        success: (result) => {
          let tempFiles = result.tempFilePaths as string[];
          tempFiles.forEach((path) => {
            let name = path.replace("//", "/").split("/").pop() as string;
            this.files.push({
              name,
              path: path,
              status: "ready",
            });
          });
          this.upload();
        },
      });
      // #endif
    },
    async upload() {
      let unUploadFiles = this.files.filter(
        (value) => !value.path.startsWith("https")
      );

      for (let index = 0; index < unUploadFiles.length; index++) {
        let file = unUploadFiles[index];
        file.status = "uploading";
        let res: any = await uploadFile(file.path);
        file.status = "finish";
        file.path = res.data.url;
      }
    },
    removeFile(index: number) {
      this.files.splice(index, 1);
    },
    getUploadFiles() {
      return this.files.filter((value) => value.path.startsWith("https"));
    },
    setFiles(filesArr: myFile[]) {
      this.files = filesArr;
    },
    downLoadFile(file: myFile) {
      let image = ["bmp", "jpg", "jpeg", "png", "gif"];
      let document = ["doc", "xls", "ppt", "pdf", "docx", "xlsx", "pptx"];
      let postFix = file.name.split(".").pop() as string;
      postFix = postFix.toLowerCase();
      if (image.includes(postFix)) {
        uni.previewImage({ urls: [file.path] });
      } else if (document.includes(postFix)) {
        uni.downloadFile({
          url: file.path,
          success: (res) => {
            uni.openDocument({ filePath: res.tempFilePath });
          },
        });
      } else {
        uni.downloadFile({
          url: file.path,
          success: (res) => {
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: (res) => {
                uni.showModal({
                  title: "文件已保存到",
                  content: res.savedFilePath,
                });
              },
            });
          },
        });
      }
    },
  },
});
</script>
<style lang="scss" scoped>
@keyframes spin {
  100% {
    transform: rotate(-360deg);
  }
}

.uploader {
  .file {
    display: flex;
    align-items: center;

    .enclosure {
      width: 60rpx;
    }
    .cover {
      height: 100rpx;
      width: 100rpx;
      border-radius: 15rpx;
    }
    .filename {
      margin-left: 15rpx;
      color: blue;
      font-size: 20rpx;
      text-decoration: underline;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: block;
      width: 250rpx;
    }

    .finish {
      margin-left: 100rpx;

      width: 50rpx;
    }

    .close {
      margin-left: 20rpx;
      width: 40rpx;
    }
  }

  .choose {
    width: 90rpx;
  }
}
.upload-bottom {
  display: flex;
  justify-content: space-between;
  .left-pic {
    margin-left: 20rpx;
  }
}

.loading {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-left: 100rpx;
  box-shadow: 0 -26rpx rgb(210, 245, 209),
    19.5rpx -19.5rpx rgba(210, 245, 209, 0.875),
    26rpx 0 rgba(210, 245, 209, 0.75),
    19.5rpx 19.5rpx rgba(210, 245, 209, 0.625), 0 26rpx rgba(210, 245, 209, 0.5),
    -19.5rpx 19.5rpx rgba(210, 245, 209, 0.375),
    -26rpx 0 rgba(210, 245, 209, 0.25),
    -19.5rpx -19.5rpx rgba(210, 245, 209, 0.125);
  animation: spin 1.2s linear infinite;
}
</style>
